
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>heatmap.js GMaps Heatmap Layer</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<style>
			body, html {
				margin:0;
				padding:0;
				font-family:Arial;
			}
			h1 {
				margin-bottom:10px;
			}
			#main {
				position:relative;
				width:1020px;
				padding:20px;
				margin:auto;
			}
			#heatmapArea {
				position:relative;
				float:left;
				width:800px;
				height:600px;
				border:1px dashed black;
			}
			#configArea {
				position:relative;
				float:left;
				width:200px;
				padding:15px;
				padding-top:0;
				padding-right:0;
			}
			.btn {
				margin-top:25px;
				padding:10px 20px 10px 20px;
				-moz-border-radius:15px;
				-o-border-radius:15px;
				-webkit-border-radius:15px;
				border-radius:15px;
				border:2px solid black;
				cursor:pointer;
				color:white;
				background-color:black;
			}
			#gen:hover{
				background-color:grey;
				color:black;
			}
			textarea{
				width:260px;
				padding:10px;
				height:200px;
			}
			h2{
				margin-top:0;
			}
		</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

</head>
<body>
<div id="main">
			<h1>GMaps Heatmap Overlay</h1>
			
			<div id="heatmapArea">
			
			</div>
			<div id="configArea">
				<div id="tog" class="btn">Toggle HeatmapOverlay</div>
				<div id="gen" class="btn">Add 5 random lat/lng coordinates</div>
			</div>
			
</div>
<script type="text/javascript" src="/js/heatmap.js"></script>
<script type="text/javascript" src="/js/heatmap-gmaps.js"></script>
<script type="text/javascript">

window.onload = function(){

	var myLatlng = new google.maps.LatLng(48.3333, 16.35);
	// sorry - this demo is a beta
	// there is lots of work todo
	// but I don't have enough time for eg redrawing on dragrelease right now
	var myOptions = {
	  zoom: 2,
	  center: myLatlng,
	  mapTypeId: google.maps.MapTypeId.ROADMAP,
	  disableDefaultUI: true,
	  scrollwheel: false,
	  draggable: false,
	  navigationControl: false,
	  mapTypeControl: false,
	  scaleControl: false,
	  disableDoubleClickZoom: true
	};
	var map = new google.maps.Map(document.getElementById("heatmapArea"), myOptions);
	
	var heatmap = new HeatmapOverlay(map, {"radius":15, "visible":true, "opacity":60});
	
	document.getElementById("gen").onclick = function(){
		var x = 5;
		while(x--){
		
			var lat = Math.random()*180;
			var lng = Math.random()*180;
			var count = Math.floor(Math.random()*180+1);
			
			heatmap.addDataPoint(lat,lng,count);
		
		}
	
	};
	
	document.getElementById("tog").onclick = function(){
		heatmap.toggle();
	};
	
	var testData = {
		max: 100,
		data: [
			{"lat":100,"lng":100,"count":100}
		]
	};
	
	// this is important, because if you set the data set too early, the latlng/pixel projection doesn't work
	google.maps.event.addListenerOnce(map, "idle", function(){
		heatmap.setDataSet(testData);
	});
	
};

</script>
</body>
</html>
